<template>
  <el-dialog
    title="选择产品规格"
    :visible.sync="dialogVisible"
    width="350px">
    <el-form ref="form" label-width="80px" size="mini">
      <el-form-item label="产品:">
        <img :src="currModel.image?currModel.image:product.image" alt="" style="width: 100px;">
        <br>
        <span v-text="product.name"></span>
      </el-form-item>
      <el-form-item :label="model.name+':'" v-for="(model,index) in product.modelArr" :key="index">
        <el-radio-group @change="checkPrice()" v-model="modelArr[index]">
          <el-radio :label="item" name="type" v-for="(item,_index) in model.arr" :key="_index"
                    :value="item"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="剩余库存:">
        <span v-text="currModel.nums" class="b"></span>
      </el-form-item>
      <el-form-item label="价格:">
        <span v-text="'￥'+ToMoney(currModel.price)" class="red"></span>
      </el-form-item>
      <el-form-item label="团购价格:" v-if="currModel.groupPrice>0">
        <span v-text="'￥'+ToMoney(currModel.groupPrice)" class="red"></span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" :disabled="(currModel.nums)===0">确认选择</el-button>
    </div>
  </el-dialog>

</template>

<script>
import CartTools from '../tools/CartTools'

export default {
  name: 'ProductChooseModelDialog',
  data: function () {
    return {
      callback: null,
      dialogVisible: false,
      currModel: {
        model: '',
        image: '',
        price: 0,
        groupPrice: 0,
        saleNums: 0,
        nums: 0,
      },
      modelArr: [
          '大',
          '黑'
        ],
      product: {
        id:0,
        name: '',
        image: this.NoImageUrl,
        shopId: 0,
        shopName: '',
        shopLogo: '',
        price: 0,
        modeArr: [
         /*  {name: '尺寸', list: ['大', '中', '小']},
          {name: '颜色', list: ['黑', '白','红']}, */
        ],
        stockList: [
          /* {
            "price": 122.05,
            "groupPrice": 0,
            "model": "大,黑",
            "surplusNums": 204
          },
          {
            "price": 122.05,
            "groupPrice": 0,
            "model": "大,白",
            "surplusNums": 202
          },
          {
            "price": 102.05,
            "groupPrice": 0,
            "model": "小,白",
            "surplusNums": 202
          },
          {
            "price": 102.05,
            "groupPrice": 0,
            "model": "小,红",
            "surplusNums": 202
          } */
        ],
      }
    }
  },
  mounted () {
    let $this = this
    $this.bus.$on('ProductChooseModelDialogCallBus', function (actType,productData, callback) {
      $this.product.id = productData.id
      $this.product.image = productData.image
      $this.product.name = productData.name
      $this.product.shopId = productData.shopId
      $this.product.shopName = productData.shopName
      $this.product.shopLogo = productData.shopLogo
      $this.getModelDetail(function () {
        // 商品列表单次选择加入购物车
        $this.actType = actType

        // 商品详情,重复弹出
        $this.callback = callback
        // 初始化-默认值(model)
        if (productData.shopProductStock && productData.shopProductStock.model.length > 0) {
          $this.modelArr = productData.shopProductStock.model.split(',')
        } else {
          $this.modelArr= $this.product.stockList[0].model.split(',')
        }
        $this.checkPrice()
        $this.dialogVisible = true
        $this.$forceUpdate()
      })
    })
    // $this.checkPrice()
  },
  methods: {
    getModelDetail:function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'ShopProduct/productModeDetail', {
        id: $this.product.id,
      }, function (data) {
        $this.product.id=data.id
        $this.product.name=data.name
        $this.product.image=data.image
        $this.product.stockList=data.stockList
        $this.product.modelArr=data.modelArr
        callback()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 确认选择操作
    confirm: function () {
      if (this.actType==='productListItem'){
        CartTools.addProduct({
          id:this.product.id,
          name:this.product.name,
          image:this.product.image,
          shopId:this.product.shopId,
          shopName:this.product.shopName,
          shopLogo:this.product.shopLogo,
          nums:1,
          price:this.currModel.price,
          model:this.currModel.model,
        })
        this.successTip('购物车,添加成功')
        return;
      }
      // console.log('this.currModel',this.currModel)
      if (typeof this.callback!=='undefined'){
        this.callback(this.currModel)
      }
      this.dialogVisible=false
    },
    checkPrice: function () {
      var modelString = this.modelArr.join(',')
      var currModel = {
        model: '',
        image: '',
        price: 0,
        groupPrice: 0,
        nums: 0,
        saleNums: 0,
      }
      let $this = this
      // var currModel={}
      this.product.stockList.forEach(function (value, index) {
        // console.log('value', value)
        if (value.model === modelString) {
          currModel = value
        }
      })
      // console.log('this.currModel',this.currModel)
      this.currModel = currModel
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>

</style>
